<template>
  <div id="screen">
    <!-- 筛选 -->
    <van-dropdown-menu active-color="#1779ff">
      <van-dropdown-item title="筛选" ref="ref1">
        <!-- 抖音销量 -->
        <van-cell title="点赞数" class="screen">
          <template>
            <button
              class="num"
              :class="[item == likes_01 ? 'active' : '']"
              v-for="item in options"
              :key="item"
              @click="likes(item)"
            >{{ item }}</button>
          </template>
        </van-cell>
        <!-- 粉丝榜 -->
        <van-cell title="粉丝数" class="screen">
          <template>
            <button
              class="num"
              :class="[item == fans_01 ? 'active' : '']"
              v-for="item in options_01"
              :key="item"
              @click="fans(item)"
            >{{ item }}</button>
          </template>
        </van-cell>
        <van-cell title="作品数" class="screen">
          <template>
            <button
              class="num"
              :class="[item == works_01 ? 'active' : '']"
              @click="works(item)"
              v-for="item in options_02"
              :key="item"
            >{{ item }}</button>
            <van-checkbox v-model="checked" shape="square">是否带货</van-checkbox>
          </template>
        </van-cell>
        <!-- 排行榜 -->
        <div style="padding: 5px 16px">
          <van-button type="danger" block round @click="onConfirm">确认</van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['不限', '10万-50万', '50万-100万', '100万-200万', '>200万'],
      likes_01: '不限',
      options_01: [
        '不限',
        '10万-50万',
        '50万-100万',
        '100万-500万',
        '500万-1000万',
        '>1000万'
      ],
      fans_01: '不限',
      options_02: ['不限', '<10', '10-50', '50-100', '>100'],
      works_01: '不限',
      checked: false
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    //作品
    works(i) {
      this.works_01 = i;
    },
    likes(i) {
      this.likes_01 = i;
    },
    fans(i) {
      this.fans_01 = i;
    },
    //关闭弹窗(筛选中的确认按钮)
    onConfirm() {
      this.$emit(
        'onConfirm',
        this.works_01,
        this.likes_01,
        this.fans_01,
        this.checked //是否带货
      );
      this.$refs.ref1.toggle();
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.commerce {
  font-size: 0.373333rem;
  vertical-align: top;
  color: #222222;
  margin-top: 0.4rem;
}
</style>
